<template>
  <van-field
    :model-value="''"
    readonly
    :label="title"
    :placeholder="`请选择${title}`"
    @click-input="clickSelectDate"
  >
    <template #input>
      <div v-if="selectValue.length">
        <div v-for="item in selectValue" class="select_value_item" :key="item">{{ item }}</div>
      </div>
      <div v-else style="color: #ccc;">请选择{{ title }}</div>
    </template>
  </van-field>

  <van-action-sheet v-model:show="visible" :title="title" @close="clickCancel">
    <van-empty v-if="!getOptions.length" :description="emptyText" />
    <div v-else class="select_checkbox_main">
      <div class="select_checkbox_main__inner">
        <van-checkbox-group v-model="selectVal">
          <div
            class="select_checkbox_item van-hairline--bottom"
            v-for="item in getOptions"
            :key="item.value"
          >
            <van-checkbox
              :name="item.value"
              shape="square"
              :disabled="isCheckboxDisabled(item)"
            >{{ item.text }}</van-checkbox>
          </div>
        </van-checkbox-group>
      </div>
      <div class="select_checkbox_main_btn">
        <van-button type="primary" block size="small" @click="clickConfirm">确定</van-button>
      </div>
    </div>
  </van-action-sheet>
</template>

<script setup>
import { computed, toRefs, ref } from 'vue'

const props = defineProps({
  modelValue: {
    type: Array,
    default: () => ([])
  },
  list: {
    type: Array,
    default: [],
  },
  title: {
    type: String,
    default: ''
  },
  emptyText: {
    type: String,
    default: ''
  }
})
const emits = defineEmits(['update:modelValue'])

const visible = ref(false)
const selectVal = ref([])
const modelValueArr = computed({
  get () {
    const { modelValue } = toRefs(props)
    return modelValue.value
  },
  set (val) {
    emits('update:modelValue', val.filter(item => !!item))
  }
})
const selectValue = computed(() => {
  // const { list } = toRefs(props)
  const list = getOptions
  return modelValueArr.value
    .map(item => list.value.find(val => val.value == item)?.text || item)
})
const getOptions = computed(() => {
  const { list } = toRefs(props)
  const _list = JSON.parse(JSON.stringify(list.value));
  modelValueArr.value.forEach(item => {
    const isExist = list.value.some(val => val.value == item)
    if (!isExist) {
      _list.push({ text: item, value: item });
    }
  })
  return _list;
})

function isCheckboxDisabled (item) {
  const list = modelValueArr.value;
  if (list.includes(item.value)) return false
  return item.disabled
}
function clickSelectDate () {
  const { modelValue } = toRefs(props)
  visible.value = true
  selectVal.value = modelValue.value
}
function clickConfirm () {
  emits('update:modelValue', selectVal.value.filter(item => !!item))
  clickCancel();
}
function clickCancel () {
  visible.value = false
}

</script>

<style lang="less" scoped>
.select_checkbox_main {
  padding: 10px 20px;
  &__inner {
    height: 60vh;
    overflow: auto;
  }
  .select_checkbox_item {
    padding: 10px 0;
  }
  &_btn {
    padding: 10px 0 30px;
  }
}

.select_value_item {
  border: 1px solid var(--color-primary);
  padding: 3px;
  text-align: justify;
  border-radius: 3px;
  & + .select_value_item {
    margin-top: 5px;
  }
}
</style>